<template>
  <div class="app-container">
    <div style="margin: 10px 0">
      <el-row :gutter="10">
        <el-col :span="6" v-for="item in dishList" :key="item.dishId" style="margin-bottom: 10px">
          <div style="border: 1px solid #ccc; padding-bottom: 10px; border-radius: 10px; overflow: hidden">
            <image-preview :src="item.picture" alt="" style="width: 100%; padding: 10px; height: 200px;" />
            <div style="color: #666; padding: 10px; font-size: 18px">{{ item.name }}</div>
            <div class="app-container" style="font-size: 14px">{{item.description}}</div>
            <div style="color: orange; padding: 5px; font-size: 20px">￥ {{item.price}}</div>
            <div style="padding: 10px">
              <div class="app-container">
                <el-button type="primary" @click="showAddToCartDialog(item)">加入购物车</el-button>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <!-- 添加模态框 -->
    <el-dialog
      title="选择数量"
      :visible.sync="addToCartDialogVisible"
      width="30%"
      center
    >
      <div style="border: 1px solid #ccc; padding-bottom: 10px; border-radius: 10px; overflow: hidden">
      <image-preview :src="selectedDish.picture" alt="" style="width: 100%; padding: 10px; height: 100%;" /></div>
      <div class="app-container" style="font-size: 14px" align="center">{{ selectedDish.description }}</div>
      <el-row type="flex" justify="center">
        <el-col :span="9">
          <el-input-number v-model="addToCartNumber" :min="1" :max="100" label="数量"></el-input-number>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addToCartDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addToCartWithQuantity">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import { listDish } from "@/api/dish/dish";
import { addDishToCart } from "@/api/shoppingcar/shoppingcar";

export default {
  data() {
    return {
      title: "",
      dishList: [],
      total: 0,
      loading: false,
      page: 1, // 当前页码
      pageSize: 10, // 每页条数
      userId: localStorage.getItem('userId'),
      form: { number: 1, dishId: null }, // 初始化 form 对象，包含 dishId 和 number
      addToCartDialogVisible: false, // 控制模态框的可见性
      addToCartNumber: 1, // 默认数量为 1
      selectedDish: {}, // 保存选中的菜品
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,}
    };
  },
  created() {
    this.getList(); // 获取初始商品数据
  },
  methods: {
    getList() {
      this.loading = true;
      listDish(this.queryParams)
        .then(response => {
          if (response && response.rows) {
            this.dishList = response.rows;
            this.total = response.total;
          }
        })
    },
    // 显示加入购物车的模态框
    showAddToCartDialog(item) {
      this.addToCartDialogVisible = true;
      this.form.dishId = item.dishId; // 保存选中的菜品 ID
      this.selectedDish = item; // 保存选中的菜品
    },
    // 加入购物车
    addToCartWithQuantity() {
      this.addToCartDialogVisible = false; // 关闭模态框

      // 获取用户 ID
      const userId = localStorage.getItem("userId");
      if (!userId) {
        this.$modal.msgError("用户未登录，请先登录");
        return;
      }

      // 设置表单数据
      this.form.userId = userId;
      this.form.number = this.addToCartNumber; // 使用模态框中的数量

      // 检查 dishId 是否有效
      if (!this.form.dishId) {
        this.$modal.msgError("请选择有效的菜品");
        return;
      }

      // 调用添加到购物车方法
      addDishToCart(this.form)
        .then(response => {
          this.$modal.msgSuccess("加入购物车成功");
        })
        .catch(error => {
          this.$modal.msgError("添加到购物车失败，请稍后重试");
        });
    }
  }
};
</script>
